<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../image/OIP.jpg" type="image/x-icon" />
    <link rel="shortcut icon" href="../image/OIP.jpg" type="image/x-icon" />
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/footer.css">  
    <title>主页</title>
</head>

<body>
    <div id="app">
        <header>
            <div id="header_content">
                <span id="logo_first">相亲</span>
                <span id="logo_last">论坛</span>
            </div> 
        </header>
        <main>
            <div class="left">
                <div class="user_content">
                    <div class="userAvatar_content">
                        <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%" class="userAvatar">
                        <div class="userMessage">
                            <p>用户名</p>
                        </div>
                    </div>    
                    <div class="user_bottom">
                        <a href="javaScript:void(0);">
                            <p>520</p>
                            <p>关注</p>
                        </a>  
                        <a href="javaScript:void(0);">
                            <p>520</p>
                            <p>粉丝</p>
                        </a>  
                        <a href="javaScript:void(0);">
                            <p>520</p>
                            <p>动态</p>
                        </a>      
                    </div> 
                </div>

                <div class="left_bottom">
                    <h2> 关注的人</h2>
                    <div id="left_bottom_content">
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名1</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名2</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名3</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名4</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名1</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名2</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名3</span>
                        </p>
                        <p>
                            <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                            <span>用户名4</span>
                        </p>
                    </div>                  
                </div>
            </div>

            <div class="middle">
                <div id="postArticle">
                    <form action="javascript:void(0);">
                        <p>
                            <textarea id="editor" cols="50" rows="8" name="article">在这里输入内容...</textarea>
                        </p>
                        <p>
                            <input type="submit" value="发布">
                            <input type="reset" value="重置">
                        </p>                      
                    </form>     
                </div>
                <div id="filterNav">
                    <form action="javascript:void(0);">
                        <ul>
                            <li>地区
                                <select>
                                    <option value="0">不限</option>
                                    <option value="zhuhai">珠海</option>
                                    <option value="zhuhai">中山</option>
                                    <option value="zhuhai">珠海</option>
                                    <option value="zhuhai">珠海</option>
                                    <option value="zhuhai">珠海</option>
                                    <option value="zhuhai">珠海</option>
                                </select>
                            </li>
                            <li>年龄
                                <select>
                                    <option value="0">不限</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                </select>
                            </li>
                            <li>身高
                                <select>
                                    <option value="0">不限</option>
                                    <option value="1">150以上</option>
                                    <option value="2">160以上</option>
                                    <option value="3">170以上</option>
                                    <option value="4">180以上</option>
                                    <option value="5">190以上</option>
                                </select>
                            </li>
                            <li>收入
                                <select>
                                    <option value="0">不限</option>
                                    <option value="1">2000以上</option>
                                    <option value="2">3000以上</option>
                                    <option value="3">4000以上</option>
                                    <option value="4">5000以上</option>
                                    <option value="5">6000以上</option>
                                    <option value="6">7000以上</option>
                                </select>
                            </li>
                            <li>
                                <input type="submit" value="保存">
                                <input type="reset" values="取消">
                            </li>
                        </ul>
                        
                    </form>           
                </div>
                <div id="articleNav">
                    <ul>
                        <li>每日推荐</li>
                        <li>我的动态</li>
                        <li>关注动态</li>
                        <li>推荐动态</li>
                    </ul>
                </div>
                <div id="articleView">
                    <p class="articleItem">
                        <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                        <span class="articleUserName">用户名4</span>
                        <textarea name="article" id="articleView" cols="30" rows="4" disabled="disabled" >皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘
                        </textarea>                                            
                        <span class="iconfont icon-dianzan dianzan"> 222</span>
                        <span class="iconfont icon-pinglun pinglun"> 111</span>
                    </p>
                    <p class="articleItem">
                        <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                        <span class="articleUserName">用户名4</span>
                        <textarea name="article" id="articleView" cols="30" rows="4" disabled="disabled" >皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘
                        </textarea>                                            
                        <span class="iconfont icon-dianzan dianzan"> 222</span>
                        <span class="iconfont icon-pinglun pinglun"> 111</span>
                    </p>
                    <p class="articleItem">
                        <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                        <span class="articleUserName">用户名4</span>
                        <textarea name="article" id="articleView" cols="30" rows="4" disabled="disabled" >皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘
                        </textarea>                                            
                        <span class="iconfont icon-dianzan dianzan"> 222</span>
                        <span class="iconfont icon-pinglun pinglun"> 111</span>
                    </p>
                    <p class="articleItem">
                        <img src="../image/pkq.jpg" alt="头像" width="100%" height="100%">
                        <span class="articleUserName">用户名4</span>
                        <textarea name="article" id="articleView" cols="30" rows="4" disabled="disabled" >皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘皮卡丘
                        </textarea>                                            
                        <span class="iconfont icon-dianzan dianzan"> 222</span>
                        <span class="iconfont icon-pinglun pinglun"> 111</span>
                    </p>
                    
                </div>
            </div>

            <div class="right">
                <div class="top">
                    

                </div>
                <div class="bottom">
                    <p>论坛喜讯</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    <p>妙蛙种子和小火龙结婚啦!</p>
                    <p>朱杰和特朗普结婚啦!</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    <p>妙蛙种子和小火龙结婚啦!</p>
                    <p>朱杰和特朗普结婚啦!</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    <p>妙蛙种子和小火龙结婚啦!</p>
                    <p>朱杰和特朗普结婚啦!</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    <p>妙蛙种子和小火龙结婚啦!</p>
                    <p>朱杰和特朗普结婚啦!</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    <p>妙蛙种子和小火龙结婚啦!</p>
                    <p>朱杰和特朗普结婚啦!</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    <p>妙蛙种子和小火龙结婚啦!</p>
                    <p>朱杰和特朗普结婚啦!</p>
                    <p>皮卡丘和杰尼龟结婚啦!</p>
                    
                </div>
               
            </div>


        </main>
    </div>
    
    <script>
      let obj = document.getElementsByTagName('li');
      function turnTapColor(obj,index){
        Object.keys(obj).forEach((key)=>{
            obj[key].style.color="black";
          });
          obj[index].style.color="rgb(241, 114, 157)";
      }
      for(let i =0 ; i<obj.length;i++){
        obj[i].onclick=()=>{
            turnTapColor(obj,i);
        }
      }



   </script>

</body>
</html>